<!DOCTYPE html>
<html>
<head>
<title>
Layout
</title>
</head>


<style type="text/css">

*{
	margin: 0;
	padding: 0;
} 

.dv0{
	margin: 0;
	padding: 0;
	width:100%;
	height:100%;
	position:relative;
}

.dv0>div{
	margin: 0;
	padding: 0;
	width: 50%;
	height: 50%;
   border-color: blue;
   border-width: 0px;
   border-style: solid;
   overflow: hidden;
   <!-- display: inline-block; -->
   position:relative;
}

.dv1{
	clear:none;
	float:left;
	top:0;
	left:0; 
	background-color: yellow;
}

.dv2{
	clear:none;
	float:right;
	top:0;
	right:0;
	background-color: gray;
}

.dv3{
	clear:none;
	float:left;
	left:0;
	bottom: 0;
	background-color: hotpink;
}

.dv4{
	clear:none;
	float:right;
   right:0;
   bottom:0;
	background-color: green;
}

</style>

<body>

<div class="dv0">

<div class="dv1">
<span>div1</span>
</div>

<div class="dv2">
<span>div2</span>
</div>

<div class="dv3">
<span>div3</span>
</div>

<div class="dv4">
<span>div4</span>
</div>

</div>





</body>

</html>
